<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<title th:text="#{i18n.text_1}"></title>
	<!--[if lt IE 9]>
	<script src="../js/html5shiv.js"></script>
	<script src="../js/respond.min.js"></script>
	<![endif]-->
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		table {
			border-collapse: collapse;
			border-spacing: 0;
		}

		h1, h2, h3, h4, h5, h6 {
			font-size: 100%;
		}

		ul, ol, li {
			list-style: none;
		}

		em, i {
			font-style: normal;
		}

		img {
			border: none;
		}

		input, img {
			vertical-align: middle;
		}

		body {
			background: #fff;
			color: #666;
			font-size: 14px;
			font-family: arial;
		}

		a {
			color: #666666;
			text-decoration: none;
		}

		html, body {
			background: #f9f9f9;
			width: 100%;
			height: 100%;
			font-family: Helvetica, sans-serif;
			-webkit-text-size-adjust: none;
		}

		* {
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		}

	</style>
	<style>
		body {
			font: 12px/1.5 "Microsoft YaHei", tahoma, arial, Hiragino Sans GB, \5b8b\4f53;
			overflow: hidden;
			position: relative;
			height: 100%;
			width: 100%;
		}

		a {
			text-decoration: none;
		}


		.entry a {
			font-size: 12px;
			color: #fff;
			margin: 0 5px;
		}

		.entry a:hover {
			color: #00bbee;
		}


		.wrap {
			position: absolute;
			left: 0;
			top: 25%;
			width: 100%;
			text-align: center;
			z-index: 2;
		}

		.slogan {
			width: 600px;
			height: 200px;
			background: url(../images/slogan.png) no-repeat 0 0;
			display: inline-block;
			background-size: 600px;
		}

		.mid {
			width: 100%;
		}

		.main-entry {
			width: 360px;
			height: 50px;
			margin: 15px auto 0;
		}

		.main-entry a {
			display: block;
			text-decoration: none;
			float: left;
			text-align: center;
			cursor: pointer;
			border-radius: 8px;
			font-size: 14px;
			letter-spacing: 1px;
			height: 50px;
			width: 170px;
			color: #ffffff;
			line-height: 50px;
			position: relative;
			overflow: hidden;
		}

		.main-entry a .title {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
		}



		.main-entry s {
			background-color: #00a3ee;
			opacity: .9;
			display: block;
			border-radius: 8px;
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
		}

		.main-entry a:hover s {
			background-color: #00aaee;
			opacity: 1;
		}

		a.personal-login {
			margin-left: 20px;
			transition: all .3s ease-in-out;
			-webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
		}





		.back {
			position: absolute;
			left: 0;
			top: 0;
			right:0;bottom:0;
			width: 100%;
			overflow: hidden;
			background: url("../images/index_bg.jpg") center center no-repeat;
			background-size: cover;
		}
	</style>
</head>
<body class="index">
<div class="wrap">
	<div class="slogan"></div>
	<div class="mid">
		<div class="main-entry">
			<a th:href="@{/login}" class="developer-login"><span class="title" th:text="#{i18n.text_6}"></span><s></s></a>
			<a th:href="@{/register}" class="personal-login"><span class="title" th:text="#{i18n.text_11}"></span><s></s></a>
		</div>
	</div>
</div>
<div class="back"></div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/particles.js"></script>
</body>
</html>